<!DOCTYPE html>
<html>

<head>
	<title>websocket示例</title>
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>

<body>
	<style type="text/css">
		.steps {
			position: relative;
			margin-bottom: 30px;
			counter-reset: step;
			/*创建步骤数字计数器*/
		}
		/*步骤描述*/

		.steps li {
			list-style-type: none;
			font-size: 12px;
			text-align: center;
			width: 25%;
			position: relative;
			float: left;
		}
		/*步骤数字*/

		.steps li:before {
			display: block;
			content: counter(step);
			/*设定计数器内容*/
			counter-increment: step;
			/*计数器值递增*/
			width: 32px;
			height: 32px;
			background-color: #019875;
			line-height: 32px;
			border-radius: 32px;
			font-size: 16px;
			color: #fff;
			text-align: center;
			font-weight: 700;
			margin: 0 auto 8px auto;
		}
		/*连接线*/

		.steps li~li:after {
			content: '';
			width: 100%;
			height: 2px;
			background-color: #019875;
			position: absolute;
			left: -50%;
			top: 15px;
			z-index: -1;
			/*放置在数字层后面*/
		}
		/*将当前/完成步骤之前连接线变绿*/

		.steps li.active:after {
			background-color: #019875;
		}
		/*将当前/完成步骤之后的数字及连接线变灰*/

		.steps li.active~li:before,
		.steps li.active~li:after {
			background-color: #777;
		}
	</style>
	<ul class="steps">
		<li>登入</li>
		<li class="active">选对象</li>
		<li>写消息</li>
		<li>完成交流</li>
	</ul>
	<hr /><br /><br /><br />
	<div class="container">
		<div class="row">
			<div class="btn btn-default js_countdown">
				<%= endtime %>
			</div>
		</div>
		<div class="row">
			<ul class="col-md-3 list-group" id="js_userList">
				<li data-type="all" class="list-group-item">所有人</li>
			</ul>
			<div class="col-md-9">
				<div id="js_msgList" style="max-height: 500px;overflow-y: auto;"></div>
				<hr />
				<div id="js_form">
					<p>发送给：<span class="js_to"></span></p>
					<p>
						<textarea class="form-control" rows="3" cols="20"></textarea>
					</p>
					<p class="text-right"><button type="button" class="btn btn-default">发送</button></p>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="./javascripts/jquery-1.11.2.js"></script>
	<!--
_msg={
	msgType:{join,msg,leave},
    msg:"",
    to?:""
}
-->
	<script type="text/javascript">
		document.addEventListener('pause', function () {
			alert('app just entered background.');
		});


		if (window.WebSocket != undefined) {
			// var clientName = prompt("Please enter your name","");
			//    if(!clientName){
			//    	window.location.reload();
			// }
			var clientName = "";
			var connection = new WebSocket("ws://192.168.6.236:3000");
			var clientId = "";
			var toClient = "";
			connection.onopen = function (event) {
				console.log("connected to:" + event.currentTarget.url);
				connection.onclose = wsClose;
				connection.onmessage = wsMessage;
				connection.onerror = wsError;
				initEvent(connection);
			}
			function wsClose(event) {
				var oUser = $("#js_userList"),
					oMsg = $("#js_msgList");
				oUser.empty();
				oMsg.prepend("<p class='alert alert-danger'>您己断开连接</p>")
				console.log("closeed");
			}
			function wsMessage(event) {
				if ("" == clientId) {
					clientId = event.data;
					console.log("用户加入:" + event.data + "," + clientName);
					var _renameMsg = {
						msgType: "join",
						msg: { id: clientId, name: clientName }
					};
					connection.send(JSON.stringify(_renameMsg));
					return false;
				}
				//handlermsg
				handlermsg(event.data);
			}
			function wsError(event) {
				console.log("error:" + event.data);
			}


			/**
			 * [handlermsg description]
			 * @param  {[type]} data [description]
			 * @return {[type]}      [description]
			 */
			var isMine = true;
			function handlermsg(data) {
				var oUser = $("#js_userList"),
					oMsg = $("#js_msgList");
				let _data;
				try {
					_data = JSON.parse(data);
				} catch (e) {
					_data = data;
					console.log(e);
				}
				switch (_data.msgType) {
					case "join":
						oUser.append(isMine ? "<li class='list-group-item' style='color:red;font-weight:bold;'>" + _data.msg + "</li>" : "<li class='list-group-item'>" + _data.msg + "</li>");
						isMine = false;
						break;
					case "leave":
						oUser.find("li").each(function (k, v) {
							if (_data.msg == $(v).html()) {
								$(v).remove();
							}
						});
						break;
					case "system":
						oMsg.prepend("<p class='alert alert-warning'>system:" + _data.msg + "</p>");
						break;
					case "boradcast":
						oMsg.prepend("<p class='alert alert-success'>" + _data.msg + "</p>");
						break;
					case "private":
						oMsg.prepend("<p class='alert alert-info'>" + _data.msg + "</p>")
						break;
					default:
						oMsg.prepend("<p class='alert alert-info'>?????" + _data + "</p>")
						console.log("msg:" + _data);
				}
			}

			/**
			 * [init description]
			 * @return {[type]} [description]
			 */
			function initEvent(connection) {
				var oForm = $("#js_form"),
					oTo = oForm.find(".js_to"),
					oUser = $("#js_userList");
				oUser.on("click", "li", function () {
					toClient = $(this).text();
					if (toClient == clientId) {
						toClient = "";
						oTo.html(toClient);
						alert("不能和自己说话");
						return false;
					}
					oTo.html(toClient);
					if ($(this).data("type") == "all") {
						toClient = "";
					}
				});

				oForm.on("click", ".btn", function () {
					var _text = oForm.find("textarea").val();
					_text = $.trim(_text);
					if (!_text) {
						console.log("空消息");
						return false;
					}
					var _msg = {
						to: toClient,
						msgType: "msg",
						msg: _text
					}
					connection.send(JSON.stringify(_msg));
					oForm.find("textarea").val("");
				})

				$("body").keydown(function (event) {
					if (event.keyCode == "13") {
						//keyCode=13是回车键
						oForm.find(".btn").click();
					}
				});
			};

		}
	</script>
</body>

</html>